<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="swiper-container banner">
    <ul  id="lunbo" class="swiper-wrapper">

    </ul>
    <div class="swiper-pagination"></div>
</div>
<!-- 轮播图 -->

<div class="goods-infor1">
    <div class="price">
        <div id="now" class="now"><i>￥</i></div>
    </div>
    <!--<div class="sell">-->
        <!--<div class="title">已抢购60%</div>-->
        <!--<div class="progress-wrapper">-->
            <!--<div class="progress" style="width: 60%;"></div>-->
        <!--</div>-->
    <!--</div>-->
</div>
<!-- 商品信息1 -->

<div class="goods-infor2 bottom-border">
    <div class="top">
        <div class="top-left">
            <div id="name" class="name"></div>
            <div id="des" class="des">价廉新鲜</div>
        </div>
        <div onclick="shoucang()" class="top-right" id="collection">
            <div class="icon"></div>
            <div class="text">收藏</div>
        </div>
    </div>
    <!--  -->
    <div class="bottom">
        <div id="sell" class="sell"></div>
        <div id="stock" class="stock"></div>
    </div>
</div>
<!-- 商品信息2 -->


<a href="user-center.html"><img src="img/VIP.png" alt="" class="vip"></a>
<!-- 会员  -->

<div class="ratings">
    <div id="pjTitle" class="title bottom-border">用户评价<i>(46)</i></div>
    <div id="pj66l" class="rating-list">
        <div id="pjliebiao" class="rating-item">

            <div class="infor clearfix">
                <img id="pjLogo" src="" alt="" class="avatar">
                <div class="name-wrapper">
                    <div id="pjname" class="name"></div>
                    <div class="stars">
                        <div class="star on"></div>
                        <div class="star on"></div>
                        <div class="star on"></div>
                        <div class="star on"></div>
                        <div class="star"></div>
                    </div>
                </div>
                <div class="time">2017.06.26</div>
            </div>
            <!--  -->
            <div id="pjtext" class="text"></div>
            <div class="imgs">
            </div>

        </div>
        <!--  -->
    </div>
    <a id="btnPL" href="#" class="more">查看更多评价</a>
</div>
<!-- 评价 -->

<div class="title-section">
    <div class="line"></div>
    <div class="title">为你推荐</div>
    <div class="line"></div>
</div>
<!-- 为你推荐（title） -->

<div id="tuijianList" class="list">
    <!--<div class="list-item">-->
        <!--<img src="img/img.png" class="img" alt="">-->
        <!--<div class="name">进口超大车厘子进口超大车厘子</div>-->
        <!--<div class="bottom">-->
            <!--<div class="price">￥368.00</div>-->
            <!--<div class="add-cart"></div>-->
        <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash;  &ndash;&gt;-->
    <!--<div class="list-item">-->
        <!--<img src="img/img.png" class="img" alt="">-->
        <!--<div class="name">进口超大车厘子进口超大车厘子</div>-->
        <!--<div class="bottom">-->
            <!--<div class="price">￥368.00</div>-->
            <!--<div class="add-cart"></div>-->
        <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash;  &ndash;&gt;-->
    <!--<div class="list-item">-->
        <!--<img src="img/img.png" class="img" alt="">-->
        <!--<div class="name">进口超大车厘子进口超大车厘子</div>-->
        <!--<div class="bottom">-->
            <!--<div class="price">￥368.00</div>-->
            <!--<div class="add-cart"></div>-->
        <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash;  &ndash;&gt;-->
    <!--<div class="list-item">-->
        <!--<img src="img/img.png" class="img" alt="">-->
        <!--<div class="name">进口超大车厘子进口超大车厘子</div>-->
        <!--<div class="bottom">-->
            <!--<div class="price">￥368.00</div>-->
            <!--<div class="add-cart"></div>-->
        <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash;  &ndash;&gt;-->
    <!--<div class="list-item">-->
        <!--<img src="img/img.png" class="img" alt="">-->
        <!--<div class="name">进口超大车厘子进口超大车厘子</div>-->
        <!--<div class="bottom">-->
            <!--<div class="price">￥368.00</div>-->
            <!--<div class="add-cart"></div>-->
        <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash;  &ndash;&gt;-->
    <!--<div class="list-item">-->
        <!--<img src="img/img.png" class="img" alt="">-->
        <!--<div class="name">进口超大车厘子进口超大车厘子</div>-->
        <!--<div class="bottom">-->
            <!--<div class="price">￥368.00</div>-->
            <!--<div class="add-cart"></div>-->
        <!--</div>-->
    <!--</div>-->
    <!--  -->
</div>
<!-- 产品列表 -->

<div class="title-section">
    <div class="line"></div>
    <div class="title">继续拖动，查看详情</div>
    <div class="line"></div>
</div>
<!-- 继续拖动，查看详情（title） -->

<div id="details" class="details">
    <!--<img src="img/banner.png" alt="">-->
    <!--<img src="img/banner2.png" alt="">-->
</div>
<!-- 详情内容 -->

<div class="mask"></div>
<!-- 遮罩层 -->

<div class="spec-section">
    <div class="top-wrapper">
        <div class="avatar-wrapper">
            <img id="tcLogo" src="" alt="" class="avatar">
        </div>
        <div id="select-price" class="price"><i>￥</i>0.00</div>
        <div class="stock-wrapper">
            <div id="select-stock" class="stock"></div>
            <div id="select-name" class="stock yixuan"></div>
        </div>
    </div>
    <div class="spec">
        <div class="title">规格</div>
        <div id="spec-list" class="spec-list">
            <!--<div id="ggvalue" class="spec-item on" value="6666666666666666666">500g</div>-->
            <!--<div class="spec-item">500g</div>-->
            <!--<div class="spec-item">500g</div>-->
            <!--<div class="spec-item">500g</div>-->
            <!--<div class="spec-item">500g</div>-->
        </div>
    </div>
    <div class="count-wrapper">
        <div class="title">数量</div>
        <div class="count1">
            <div class="btn left">-</div>
            <input id="num" type="tel" value="1" class="text" readonly="readonly">
            <div class="btn right">+</div>
        </div>
    </div>
    <div class="close"></div>
    <a href="#" id="btnCommit" class="button commit">确定</a>

</div>


<!--                                   //////////////////////////-->


<!-- 选择规格 -->

<div class="bottom-menu-section ">
    <div class="bottom-menu bottom-border">
        <a href="/" class="kefu">
            <img src="img/home02.png" class="icon" alt="">
            <div class="text">首页</div>
        </a>
        <a href="cart2.html" class="kefu cart">
            <img src="img/tabbar_shoppingcart.png" class="icon" alt="">
            <div class="text">购物车</div>
        </a>
        <a href="javascript:;" class="button add-cart" id="add-cart">加入购物车</a>
        <a href="javascript:;" class="button" id="buy">立即购买</a>
    </div>
    <div class="zhanwei"></div>
</div>
<!-- 底部菜单 -->

<!-- 以下为页面js部分 -->
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script src="js/layers/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pages/public.js" type="text/javascript" charset="utf-8"></script>

<script>
    // swiper

    $('#btnCommit').click(function () {
        var spec = $('.spec-item.on');
        if (spec.length == 0) {
            alertMsg("请选择规格")
            return;
        }
        console.log(spec.attr("value"));
        ///mobile/order/buyNowConfirmOrder
        //productId=421&num=1&normalId=522&memberId=623
        //var $input=$(this).siblings('input');
        //var num = parseInt($input.val());
        var n = $('#num').attr("value");
        console.log(n)
        if (buyType == 0) {
            window.location.href = "/order2.html?memberId=" + memberId + "&productId=" + productId + "&normalId=" + spec.attr("vid") + "&num=" + n;
        } else {
            addCart(memberId, productId, spec.attr("vid"), n)
        }

    })
    // 收藏

    // $('.spec .spec-item').click(function () {
    // 	$(this).addClass('on').siblings().removeClass('on');
    // })
    // 规格选择


    $('.count1').on('tap click', '.right', function () {
        var $input = $(this).siblings('input');
        var num = parseInt($input.val());
        console.log(num);
        $input.val(num + 1);
        //console.log($('#num').value);
    });

    $('.count1').on('tap click', '.left', function () {
        var $input = $(this).siblings('input');
        var num = parseInt($input.val());
        if (num > 1) {
            $input.val(num - 1);
        }
    });
    //改变购物车中的数量
    //购买类型
    var buyType = 0;

    specAddCart('#add-cart');
    spec('#buy');

    function spec(id) {
        $(id).click(function () {
            buyType = 0;
            if ($('.spec-section').hasClass('on')) {
                $('.spec-section').removeClass('on');
                $('.mask').hide();
            } else {
                $('.spec-section').addClass('on');
                $('.mask').show();
            }
        });
        $('.spec-section .close').click(function () {
            $('.spec-section').removeClass('on');
            $('.mask').hide();
        });
    }

    function specAddCart(id) {
        $(id).click(function () {
            buyType = 1;
            if ($('.spec-section').hasClass('on')) {
                $('.spec-section').removeClass('on');
                $('.mask').hide();
            } else {
                $('.spec-section').addClass('on');
                $('.mask').show();
            }
        });
        $('.spec-section .close').click(function () {
            $('.spec-section').removeClass('on');
            $('.mask').hide();
        });
    }

    // 规格弹出

    $('.list-item').click(function () {
        window.location.href = "details.html";
    })

    $('#btnPL').click(function () {
        window.location.href = "ratings.html?productId=" + productId;
        //		<a id="btnPL" href="ratings.html?productId=276" class="more">查看更多评价</a>
    })

    // 商品跳转到详情页面
    function addCart(memberId, productId, normalId, num) {
        $.ajax({
            type: "post",
            url: ajaxUrl + '/mobile/carItem/addProduct',
            async: true,
            //productId=412&memberId=623&normalId=508&num=1
            data: {'memberId': memberId, 'productId': productId, 'normalId': normalId, 'num': num},
            success: function (data) {
                if (data.code == 0) {
                    alertMsg('成功加入购物车');
                } else {
                    alertMsg(data.message);
                }
                $('.spec-section').removeClass('on');
                $('.mask').hide();
                cartNum();
            },
            error: function () {
                errorTip();
            },
            complete: function () {

            }
        });
    }

</script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="js/sha1.js"></script>
<script src="js/pages/proDetail.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>